<template>
    <li :class="{'match': true, 'isleague': item.type=='l', 'ismobile': !ispc}"
    @click="showDetails(item)">
        <!-- PC端 | 比赛 -->
        <template v-if="ispc && item.type!=='l'">
            <div class="time">
                {{ item.time }}
            </div>
            <div class="league">
                <span>{{ item.league }}</span>
                <span>{{ item.round }}</span>
            </div>
            <div class="player">
                <div>
                    <div><img :src="defaultHeader"></div>
                    <div>{{ item.player11 }}</div>
                </div>
                <div v-if="item.player12!==''">
                    <div><img :src="defaultHeader"></div>
                    <div>{{ item.player12 }}</div>
                </div>
            </div>
            <div class="score" v-if="item.status!=0">{{ item.score1 }}</div>
            <div class="match-vs">
                {{ item.status!=0 ? '-' : 'vs' }}
            </div>
            <div class="score" v-if="item.status!=0">{{ item.score2 }}</div>
            <div class="player">
                <div>
                    <div><img :src="defaultHeader"></div>
                    <div>{{ item.player21 }}</div>
                </div>
                <div v-if="item.player22!==''">
                    <div><img :src="defaultHeader"></div>
                    <div>{{ item.player22 }}</div>
                </div>
            </div>
            <div class="links">
                <a v-for="link in item.links" :href="link.url" target="view_window">{{ '[' + link.title + ']' }}</a>
            </div>
        </template>
        <!-- 移动端 | 比赛 -->
        <template v-if="!ispc && item.type!=='l'">
            <div class="player">
                <div>
                    <div><img :src="defaultHeader"></div>
                    <div>{{ item.player11 }}</div>
                </div>
                <div v-if="item.player12!==''">
                    <div><img :src="defaultHeader"></div>
                    <div>{{ item.player12 }}</div>
                </div>
            </div>
            <div>
                <div class="league">
                    <span>{{ item.league }}</span>
                    <span>{{ item.round }}</span>
                </div>
                <div class="time">
                    {{ item.time }}
                </div>
            </div>
            <div class="player">
                <div>
                    <div><img :src="defaultHeader"></div>
                    <div>{{ item.player21 }}</div>
                </div>
                <div v-if="item.player22!==''">
                    <div><img :src="defaultHeader"></div>
                    <div>{{ item.player22 }}</div>
                </div>
            </div>
        </template>
        <!-- PC端 | 联赛 -->
        <template v-if="ispc && item.type==='l'">
            <div class="time">
                {{ item.time }}
            </div>
            <div class="league isleague">
                <span>{{ item.league }}</span>
                <span>{{ item.round }}</span>
            </div>
            <div class="links hidden-xs hidden-sm">
                <a v-for="link in item.links" :href="link.url" target="view_window">{{ '[' + link.title + ']' }}</a>
            </div>
        </template>
        <!-- 移动端 | 联赛 -->
        <template v-if="!ispc && item.type==='l'">
            <div class="time">
                {{ item.time }}
            </div>
            <div class="league">
                <span>{{ item.league }}</span>
                <span>{{ item.round }}</span>
            </div>
        </template>
    </li>
</template>

<style scoped lang="scss">
  @import '../../../assets/css/variables.scss';
  /* PC端 | 比赛 */
  .match{ 
    @include flex;
    @include flex-align-center;
    height: 74px; border-top: 1px solid $border-color;
    &:hover { 
        background: $hl-bg-color; 
    }
    >div{ 
        margin-right: 15px;
    }
    .player > div{
        display: inline-block;
        &:nth-child(2){ 
            margin-left: 10px; 
        }
        >div{
            text-align: center;
            &:first-child{ margin-bottom: 6px; }
            &:last-child{ line-height: 16px; }
        }
    }
    .links{
        @include flex-1;
        margin-right: 0; text-align: right;
        a{
            margin-left: 8px;
        }
    }
    img{ 
        width: 34px; height: 34px; border: 1px solid #e8e8e8; border-radius: 50%; 
    }
  }

   /* PC端 | 联赛 */
  .match.isleague{
    .league{
        span:first-child{ 
            font-weight: bold;
        }
    }
  }

  /* PC端 | 比赛 */
  .match.ismobile{
    @include flex-pack-justify;
    text-align: center;
    >div{
        .league{
            border-bottom: 1px solid $border-color;
        }
    }
  }
</style>

<script>
import * as default_header from '@/assets/img/default_header.png'

export default {
  name: 'MatchInfo',
  props: ['item', 'index'],
  data () {
    return {
      ispc: commons.ispc,
      defaultHeader: default_header
    }
  },
  methods: {
    showDetails(item){
      if(this.ispc){
          return;
      }
      this.$store.dispatch('setMatch', item);
      this.$router.push(`/match/details/${item.id}`);
    }
  }
}
</script>